<template>
  <Header></Header>

  <div class="more-course-content">
    <!-- 搜索模块 -->
    <div class="more-course-content-item">
      <div class="more-course-content-item-left">类别</div>
      <div class="more-course-content-item-right">
        <input
          style="font-size: 16px; padding-top: 15px; padding-left: 15px"
          type="text"
          placeholder="搜索课程"
        />
      </div>
    </div>
    <!-- 面包屑 -->
    <div
      style="
        margin-left: 40px;
        margin-top: 20px;
        width: 500px;
        height: 40px;
        background-color: #fff;
      "
    >
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>更多课程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 课程列表 -->
    <div
      style="
        background-color: pink;
        width: 1100px;
        height: 500px;
        margin: 10px auto;
      "
    >
      这里放课程列表
    </div>
  </div>

  <Footer></Footer>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

import { Search } from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";

export default {
  name: "moreCourse",
  components: {
    Header,
    Footer,
  },
};
</script>

<style scoped></style>
